@page "~/manager/modules"
@model ModuleListViewModel
@inject ManagerLocalizer Localizer
@{
    ViewBag.Title = Localizer.Module["Modules"];
    ViewBag.MenuItem = "Modules";
}
@section script
{
    <script src="~/manager/assets/js/piranha.module.min.js?v=@Piranha.Utils.GetAssemblyVersionHash(typeof(Piranha.Manager.Module).Assembly)"></script>
}

<div id="module">
    <div class="top">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">@Localizer.Menu["Settings"]</li>
                <li class="breadcrumb-item active" aria-current="page">@Localizer.Menu["Modules"]</li>
            </ol>
        </nav>

        <div class="container-fluid app" :class="{ ready: !loading }">
            <div class="top-nav">
                @foreach (var action in Piranha.Manager.Actions.Toolbars.ModuleList)
                {
                    <partial name="@action.ActionView" />
                }
            </div>
        </div>
    </div>

    <div class="container-fluid app" :class="{ ready: !loading }">
        <div class="row">
            <div class="col">
                <table class="table table-borderless">
                    <thead>
                        <tr>
                            <th class="td-small"></th>
                            <th>@Localizer.General["Name"]</th>
                            <th>@Localizer.Module["Package URL"]</th>
                            <th class="date text-center">@Localizer.General["Version"]</th>
                        </tr>
                        <tbody>
                            <tr v-for="item in items">
                                <td>
                                    <img class="img-thumbnail img-thumbnail-sm" src="~/manager/assets/img/empty-image.png" v-bind:src="item.iconUrl">
                                </td>
                                <td class="align-middle">
                                    <h5>{{ item.name }}</h5>
                                    <span class="text-nooverflow">{{ item.description }}</span>
                                </td>
                                <td class="align-middle">
                                    <a class="text-nooverflow" :href="item.packageUrl" target="_blank">{{ item.packageUrl }}</a>
                                </td>
                                <td class="align-middle text-center">{{ item.version }}</td>
                            </tr>
                        </tbody>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>
